<template>
    <el-row :gutter="20" style="padding-bottom: 100px;">
        <el-col :span="8" :offset="0" class="left">
            <!-- <div class="phone-bg">
                <div class="content">

                    <img class="bg" src="@/assets/images/iphonex.png" />
                    <img class="page" src="@/assets/images/share_card.png" alt="">
                </div>
            </div> -->
            <div class="phone-frame">
                <div class="ui-container">
                    <img src="@/assets/images/share_card.png" alt="UI Image">
                </div>
            </div>
        </el-col>
        <el-col :span="16" :offset="0">
            <el-card style="margin-top: 40px;" shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>公司名片设置</span>
                </template>
                <el-descriptions class="mt20" :column="1" :size="size" border labelClassName="des-title"
                    content-class-name="my-content">
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            公司logo
                            <el-tooltip class="box-item" effect="dark" content="公司logo" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.companyLogo">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            公司名称
                            <el-tooltip class="box-item" effect="dark" content="公司名称" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.companyName">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            公司地址
                            <el-tooltip class="box-item" effect="dark" content="公司地址" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.companyAddress">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            公司简介
                            <el-tooltip class="box-item" effect="dark" content="公司简介" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.companyIntroduction">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            公司使命
                            <el-tooltip class="box-item" effect="dark" content="公司使命" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.companyHistory">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            产品简介
                            <el-tooltip class="box-item" effect="dark" content="产品简介" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.productIntroduction">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item> -->
                </el-descriptions>
            </el-card>

            <el-card style="margin-top: 40px;" shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>个人名片设置</span>
                </template>
                <el-descriptions class="mt20" :column="1" :size="size" border labelClassName="des-title"
                    content-class-name="my-content">
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            姓名
                            <el-tooltip class="box-item" effect="dark" content="姓名" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.nickname">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            个人头像
                            <el-tooltip class="box-item" effect="dark" content="个人头像" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.avatar">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            个性签名
                            <el-tooltip class="box-item" effect="dark" content="个性签名" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.signature">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item> -->
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            联系电话
                            <el-tooltip class="box-item" effect="dark" content="联系电话" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.mobile">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            邮箱
                            <el-tooltip class="box-item" effect="dark" content="邮箱" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.email">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            浏览量
                            <el-tooltip class="box-item" effect="dark" content="浏览量" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.views">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            靠谱
                            <el-tooltip class="box-item" effect="dark" content="靠谱" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.reliable">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            名片背景
                            <el-tooltip class="box-item" effect="dark" content="名片背景" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.background">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            公司历程
                            <el-tooltip class="box-item" effect="dark" content="公司历程" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.companyHistory">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item> -->
                    <el-descriptions-item>
                        <template #label>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            个人简介
                            <el-tooltip class="box-item" effect="dark" content="个人简介" placement="top-start">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>

                        <div class="flex-center">
                            <el-radio-group v-model="form.personalProfile">
                                <el-radio label="0">不显示</el-radio>
                                <el-radio label="1">显示</el-radio>
                            </el-radio-group>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>

            <el-button style="margin: 20px auto;display: block;padding: 0 80px;" type="primary" size="large"
                @click="submit">保存</el-button>
        </el-col>
    </el-row>
</template>

<script setup name="UserCardSetting">
import { listUserCardSetting, updateUserCardSetting } from '@/api/goods/userCardSetting';
const { proxy } = getCurrentInstance()
const form = ref({
    id: undefined,
    companyName: "1",
    nickname: "1",
    companyAddress: "1",
    reliable: "1",
    signature: "1",
    mobile: "1",
    email: "1",
    views: "1",
    companyHistory: "1",
    personalProfile: "1",
    companyIntroduction: "1",
    productIntroduction: "1",
    companyLogo: "1",
    background: "1",
    avatar: "1"

});

const getList = async () => {
    const res = await listUserCardSetting();
    console.log('form :>> ', form);
    console.log(res, res);
    form.value = res.rows && res.rows.length && res.rows[0] || form.value;

};
const submit = () => {
    updateUserCardSetting(form.value).then(res => {
        if (res.code === 200) {
            proxy?.$modal.msgSuccess('操作成功');
            getList();
        }
    });
};

onMounted(() => {
    getList();
})
</script>

<style lang="scss" scoped>
.phone-bg {
    // background-image: url('@/assets/images/iphonex.png');
    width: 380px;
    height: 760px;
    background-size: 100% 100%;
    margin-top: 40px;
    position: fixed;
    border: 1px solid #ccc;

    // overflow-y: scroll;
    .content {
        position: relative;
        border: 1px solid #ccc;
        height: 760px;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 30px;
        margin-top: 40px;

        .page {
            position: absolute;
        }

        .bg {
            position: fixed;
            // margin-top: 40px;
            width: 100%;
            width: 380px;
            height: 760px;
        }
    }

}

.left {
    display: flex;
    justify-content: center;
}

.mark {
    width: 18px;
    margin-right: 10px;
}


.phone-frame {
    position: relative;
    width: 380px;
    height: 760px;
    background-image: url('@/assets/images/iphonex.png');
    background-size: cover;
}

.ui-container {
    position: absolute;
    top: 20px;
    left: 18px;
    width: 344px;
    height: 720px;
    overflow: auto;
    border-radius: 36px;

    // 隐藏滚动条
    &::-webkit-scrollbar {
        display: none;
    }
}

.ui-container img {
    width: 100%;
    display: block;
    border-radius: 36px;
}
</style>